<template>
  <div class="home">
    <!-- 首页 -->
    <van-nav-bar
  title="搜索"
  class="page-nav-bar">
  <template #title>
  <van-button to="/search" class="search-btn" icon="search" type="primary">搜索</van-button>
  </template>
  </van-nav-bar>

  <van-tabs class="home-tab" v-model="active" animated swipeable>
  <van-tab v-for="item in channels" :key="item.id" :title="item.name">
    <!-- 渲染前的东西内容写法   内容：{{item.name}} -->
    <!-- 传获取频道新闻推荐的参数 -->
    <article-list :channelId="item.id" />
  </van-tab>
  <!-- <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab> -->
  <!-- 用插槽 写menu -->
  <template #nav-right>
    <div class="placeholder-box"></div>
    <div @click="isShowEditPopup =true" class="right-menu">
      <i class="toutiao toutiao-gengduo"></i>
    </div>
  </template>
</van-tabs>

<!-- 弹出层 -->
<!-- <van-popup closeable class="editPopup"  close-icon-position="top-left" v-model="isShowEditPopup" position="bottom" :style="{ height: '90%' }"
> -->

<van-popup closeable v-model="isShowEditPopup" position="bottom" :style="{ height: '90%' }"
>
<ChannelEdit @onGo="onGo"  @setActive="active--" :channels="channels" :active="active"/>
</van-popup>

    </div>
</template>

<script>
import { getUserSelfChannels } from '@/api/user.js'
import { Toast } from 'vant'
import { getStorage } from '@/utils/storage.js'
import ChannelEdit from '@/views/Home/components/ChannelEdit'

// import ArticleList from '@/views/Home/components/ArticleList'
import ArticleList from './components/ArticleList.vue'// 组件渲染封装
export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      channels: [],
      isShowEditPopup: false
      // ChannelEdit: []
    }
  },
  components: {
    ArticleList,
    ChannelEdit
    // ArticleList
  },
  created () {
    this.loadUserChannels()
  },

  methods: {
    // 加载用户频道列表 git checkout master
    async loadUserChannels () {
      try {
        const storageData = getStorage('MY-CHANNELS')
        if (!this.$store.state.user && storageData) {
          this.channels = storageData
          return false
        }
        const res = await getUserSelfChannels()
        this.channels = res.channels
        console.log(res)// 在vue调试工具中看
      } catch (err) {
        Toast.fail('获取用户频道列表失败')
      }
    },
    onGo (e) {
      console.log(e)
      this.active = e
      console.log('点击取消')
      this.isShowEditPopup = false
    }
  }
}
</script>

<style scoped lang="less">
  .home{
  .search-btn{
  width: 555px;
      height: 64px;
      background: rgba(255, 255, 255, .2);
      border: none;
      border-radius: 32px;
  }
  /deep/.van-nav-bar__title{
  max-width:unset
  }
  .van-icon-search{
  color:#fff;
  }
  }
  /deep/.home-tab{
  .van-tab{
  min-width:200px;
  border-right: 1px solid #EDEFF3;
  height: 82px;
  }
  .van-tab--active{
  .van-tab__text{
  font-size: 30px;
  color: #333;
  }
  }
  .van-tab__line{
  width: 31px;
  height: 6px;
  background: #3296FA;
  border-radius: 3px;
  bottom: 8px;
  }
  .van-tab__nav--line{
  padding:  0;
  }
  .right-menu{
  width: 66px;
  height: 82px;
  background-color: #fff;
  position: fixed;
  right: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  i{
font-size: 40px;
  }
   &::before {
        content: '';
        width: 3px;
        height: 58px;
        position: absolute;
        left: 0;
        top: 12px;
        background-image: url(~@/assets/images/gradient-gray-line.png);
        background-size: 100% 100%;
      }
  }

  .placeholder-box{
  width: 66px;
  flex-shrink: 0;
  }
  }
</style>
